.project-sections {
  border-top: 1px solid var(--color-hairline);
  color: var(--color-secondary-text);
  margin-left: auto;
  margin-right: auto;
  max-width: px-to-rem(800px);
  padding-top: get-size(300);
}

.project-sections li {
  position: relative;
}

.project-sections__row > li {
  align-items: start;
  display: flex;
  flex-direction: column;

  @include media-query('lg') {
    flex-direction: row;
    gap: 0 px-to-rem(56px);
  }
}

.project-sections__row > li > * {
  flex: 1;
}

.project-sections__row > li:not(:first-of-type),
.project-sections__column > li:not(:first-of-type) {
  border-top: 1px solid var(--color-hairline);
  padding-top: get-size(300);
}

.project-sections__row > li > :first-child {
  // These headings have h4 styles on mobile, and h5 styles on desktop
  @extend %type--headline;
  @include flex-font((18px 28px), (20px 28px), (20px 28px));
  @include media-query('lg') {
    margin-bottom: 0;
  }
}

.project-sections__row > li > :last-child:not(:empty) {
  margin-top: get-size(300);

  @include media-query('lg') {
    margin-top: 0;
  }
}

.project-sections__column > li {
  @include media-query('lg') {
    padding-left: 0;
  }
}

.project-sections__column > li > .project-sections__icon ~ * { /* stylelint-disable-line selector-max-compound-selectors */
  margin-left: calc(#{get-size(400)} + 28px);
}

.project-sections__column > li > div {
  display: flex;
}

.project-sections__nested-title {
  @include flex-font((14px 24px), (16px 24px), (16px 24px));
  padding-bottom: 0.5em;
}

.project-sections__nested-column > li > .project-sections__icon-optional ~ * { /* stylelint-disable-line selector-max-compound-selectors */
  margin-left: calc(#{get-size(400)} + 28px);
}

.project-sections__nested-column > li > div {
  display: flex;
}

// This renders a base64'ed version of 'document.svg' with fill set to #5f6368. This SVG is used a
// multitude of times on each docs landing page, so dedup it vs including in the HTML.
.project-sections__icon {
  background-image: url('');
  height: 28px;
  position: absolute;
  width: 28px;
}

.project-sections__nested-column .project-sections__icon-optional {
  background-image: url('');
  height: 28px;
  position: absolute;
  width: 28px;
}
